// 公共样式，可以是 mixin，function，普通公共样式...等等

// 变成flex
@mixin flex($align: center, $justify: center, $direction: row) {
    display: flex;
    align-items: $align;
    justify-content: $justify;
    flex-direction: $direction;
}

// 变成所有都是center的flex
@mixin flexCenter($direction: row) {
    @include flex(center, center, $direction);
}

// 竖向flex
@mixin flexColumn() {
    display: flex;
    flex-direction: column;
}

// 超出隐藏
@mixin textcut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// grid布局
@mixin grid($count, $gap) {
    display: grid;
    grid-template-columns: repeat($count, 1fr);
    gap: $gap;
}

.txtcut {
    @include textcut;
}

// 警告
.warn {
    color: yellow;
}

// 错误
.error {
    color: red;
}

// 成功
.success {
    color: green;
}

// 占位
.empty {
    flex: 1;
}